<template>
  <view class="create-order">
    <u-sticky>
      <u-tabs :list="tabList" :current="currTab" @click="handleTabChange" lineWidth="56" lineColor="#F65D30"
        :activeStyle="tabsStyle.activeStyle" :inactiveStyle="tabsStyle.inactiveStyle" class="create-order-tabs"
        :scrollable="false">
      </u-tabs>
    </u-sticky>

    <view class="p-3 order-form-wrap">
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="单号" prop="CustName" @click="() => (showCustomer = true)">
          <view class="flex justify-right">
            {{ orderForm.ID }}
          </view>
          <view class="flex justify-right">
            {{ orderForm.StatusName }}
          </view>
        </u-form-item>
      </u--form>
      <view class="sub-title formTitleRef_0">客户信息</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="客户" prop="CustName" @click="() => (showCustomer = true)">
          <u--input v-model="orderForm.CustName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="电话" prop="Tel">
          <u--input v-model="orderForm.Tel" border="none" disabled disabledColor="#fff"></u--input>
        </u-form-item>
        <u-form-item label="联系人" prop="Contact">
          <u--input v-model="orderForm.Contact" border="none" disabled disabledColor="#fff"></u--input>
        </u-form-item>
        <u-form-item label="地址" prop="Addr">
          <u--input v-model="orderForm.Addr" border="none" :customStyle="{ 'margin-right': '10px' }" disabled
            disabledColor="#fff"></u--input>
        </u-form-item>
        <u-form-item label="客户类型" prop="CustType">
          <u--input v-model="orderForm.CustType" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="下单人" prop="HotlineName">
          <u--input v-model="orderForm.HotlineName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="下单时间" prop="CreateDate">
          <u--input v-model="orderForm.CreateDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title formTitleRef_1">工单信息</view>
      <view class="order-form-single">
        <view class="pl-3 pr-3 order-form-title flex justify-between align-center">
          <view>*下单记录</view>
        </view>
        <u--textarea confirmType="done" disabled v-model="orderForm.Descr"></u--textarea>
      </view>
      <view class="order-form-single" v-if="imageList.length">
        <view class="pl-3 pr-3 order-form-title">图片</view>
        <u-upload :fileList="imageList" name="file" multiple :deletable="false" :maxCount="imageList.length"></u-upload>
      </view>
      <view class="sub-title formTitleRef_2">充电桩型号</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="商品名称" prop="HardItemName">
          <u--input v-model="orderForm.HardItemName" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="车架号" prop="HardItemStyle">
          <u--input v-model="orderForm.HardItemStyle" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="设备编码" prop="HardSealNo">
          <u--input v-model="orderForm.HardSealNo" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="类别" prop="HardCatg">
          <u--input v-model="orderForm.HardCatg" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="品牌" prop="HardBrand">
          <u--input v-model="orderForm.HardBrand" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="购买日期" prop="BuyDate">
          <u--input v-model="orderForm.BuyDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="有效期" prop="ExpaireDate">
          <u--input v-model="orderForm.ExpaireDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="所属门店" prop="Remark4">
          <u--input v-model="orderForm.Remark4" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
      </u--form>

      <view class="sub-title formTitleRef_2">服务信息</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="服务类型" prop="RepairType">
          <u--input v-model="orderForm.RepairType" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="服务分类" prop="RepairCatg">
          <u--input v-model="orderForm.RepairCatg" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="订单来源" prop="OrderSrc">
          <u--input v-model="orderForm.OrderSrc" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="来源单号" prop="OrderNo">
          <u--input v-model="orderForm.OrderNo" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="服务加急" prop="Priority">
          <view class="flex justify-right">
            {{ orderForm.Priority ? '加急' : '非加急' }}
          </view>
        </u-form-item>
        <u-form-item label="预约时间" prop="appointment">
          <u--input v-model="appointment" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="悬赏金额" prop="RewardAmount">
          <u--input v-model="orderForm.RewardAmount" disabled disabledColor="#fff" border="none"></u--input>
        </u-form-item>
      </u--form>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="推广员ID" prop="TGID">
          <u--input v-model="orderForm.TGID" disabled disabledColor="#fff" border="none" type="number">
          </u--input>
        </u-form-item>
        <u-form-item label="业务员" prop="Saler">
          <u--input v-model="orderForm.Saler" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="业务提成" prop="Expense02">
          <u--input v-model="orderForm.Expense02" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee1" :label="orderForm.Employee1" prop="VirtCharge1">
          <u--input v-model.number="orderForm.VirtCharge1" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee2" :label="orderForm.Employee2" prop="VirtCharge2">
          <u--input v-model.number="orderForm.VirtCharge2" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee3" :label="orderForm.Employee3" prop="VirtCharge3">
          <u--input v-model.number="orderForm.VirtCharge3" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee4" :label="orderForm.Employee4" prop="VirtCharge4">
          <u--input v-model.number="orderForm.VirtCharge4" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee5" :label="orderForm.Employee5" prop="VirtCharge5">
          <u--input v-model.number="orderForm.VirtCharge5" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="Expense01">
          <u--input v-model.number="orderForm.Expense01" disabled type="digit" disabledColor="#fff" border="none"
            disabled>
          </u--input>
        </u-form-item>
        <u-form-item label="服务提成" prop="Expense01">
          <u--input v-model="orderForm.Expense01" disabled disabledColor="#fff" border="none" disabled>
          </u--input>
        </u-form-item>
      </u--form>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" disabled labelPosition="left" :model="orderForm">
        <u-form-item label="业务状态" prop="AAAAAA">
          <u--input v-model="orderForm.AAAAAA" disabled disabledColor="#fff" border="none">
          </u--input>

        </u-form-item>
        <u-form-item label="服务情况" prop="Repairdescr">
          <u--input v-model="orderForm.Repairdescr" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm">
        <u-form-item label="是否返工" prop="sex">
          <view class="flex justify-right">
            {{ orderForm.IsFanGong ? '是' : '否' }}
          </view>
        </u-form-item>
        <u-form-item label="返工工单" prop="FanGongRepairId">
          <u--input v-model="orderForm.FanGongRepairId" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">付款记录</view>
      <u--form class="pl-3 pr-3 order-form-block" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="是否支付" prop="IsPay" labelWidth="80">
          <view class="flex justify-right">
            {{ orderForm.IsPay ? '已付款' : '未付款' }}
          </view>
        </u-form-item>
        <u-form-item label="支付方式" prop="PayType" labelWidth="80">
          <u--input v-model="orderForm.PayType" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="流水号" prop="PayFollowID" labelWidth="80">
          <u--input v-model="orderForm.PayFollowID" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="支付金额" prop="PayPrice" labelWidth="80">
          <u--input v-model="orderForm.PayPrice" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="支付人" prop="Payor" labelWidth="80">
          <u--input v-model="orderForm.Payor" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="支付时间" prop="PayDate" labelWidth="80">
          <u--input v-model="orderForm.PayDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">消单说明</view>
      <u--form class="pl-3 pr-3 order-form-block" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="是否审核" prop="IsCancel" labelWidth="80">
          <view class="flex justify-right">
            {{ orderForm.IsCancel ? '已消单' : '未消单' }}
          </view>
        </u-form-item>
        <u-form-item label="消单人" prop="Cancellor" labelWidth="80">
          <u--input v-model="orderForm.Cancellor" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="消单时间" prop="CancelDate" labelWidth="80">
          <u--input v-model="orderForm.CancelDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="原因" prop="CancelDescr">
          <u--input v-model="orderForm.CancelDescr" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">审单记录</view>
      <u--form class="pl-3 pr-3 order-form-block" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="是否审核" prop="IsAudit" labelWidth="80">
          <view class="flex justify-right">
            {{ orderForm.IsAudit ? '已审核' : '未审核' }}
          </view>
        </u-form-item>
        <u-form-item label="审核时间" prop="AuditDate" labelWidth="80">
          <u--input v-model="orderForm.AuditDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="审核人" prop="Auditor" labelWidth="80">
          <u--input v-model="orderForm.Auditor" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title formTitleRef_3">费用明细-收入</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" disabled labelPosition="left" :model="orderForm">
        <u-form-item label="服务费" prop="Revenue01">
          <u--input v-model="orderForm.Revenue01" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="销售商品" prop="Revenue02">
          <u--input v-model="orderForm.Revenue02" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="搬运费" prop="Revenue03">
          <u--input v-model="orderForm.Revenue03" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="家具拆装费" prop="Revenue04" labelWidth="120">
          <u--input v-model="orderForm.Revenue04" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="超重费" prop="Revenue05">
          <u--input v-model="orderForm.Revenue05" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="TotalRevenue">
          <u--input v-model="orderForm.TotalRevenue" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">费用明细-支出</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="服务提成" prop="Expense01">
          <u--input v-model="orderForm.Expense01" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="业务提成" prop="Expense02">
          <u--input v-model="orderForm.Expense02" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="商品成本" prop="Expense03">
          <u--input v-model="orderForm.Expense03" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="停车费" prop="Expense04">
          <u--input v-model="orderForm.Expense04" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="过路费" prop="Expense05">
          <u--input v-model="orderForm.Expense05" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="TotalExpense">
          <u--input v-model="orderForm.TotalExpense" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">平台信息</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="下单方式" prop="BXType">
          <u--input v-model="orderForm.BXType" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="平台公司名称" prop="OrderCmpyName" labelWidth="120">
          <u--input v-model="orderForm.OrderCmpyName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="服务名称" prop="ServCatgName">
          <u--input v-model="orderForm.ServCatgName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="微信" prop="WeixinAppId">
          <u--input v-model="orderForm.WeixinAppId" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="OpenId" prop="WeixinOpenId">
          <u--input v-model="orderForm.WeixinAppId" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="IP" prop="IP">
          <u--input v-model="orderForm.IP" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">领料信息</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <template v-if="orderForm.JxcInfo && orderForm.JxcInfo.Details"> 
        <u-form-item labelWidth="180" :label="item.ItemName"  v-for="(item, index) in orderForm.JxcInfo.Details" :key="index">
          <view class="flex justify-right">
            {{ item.SaleQty }}*{{ item.SaleMoney }}
          </view>
        </u-form-item>
      </template>
        <u-form-item label="合计">
          <view class="flex justify-right">
            {{ orderForm.JxcInfo ? orderForm.JxcInfo.TotalQty : 0 }}件 {{ orderForm.JxcInfo ? orderForm.JxcInfo.TotalAmount : 0 }}元
          </view>
        </u-form-item>
      </u--form>      
      <view class="sub-title">签收</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="是否签收" prop="IsConfirm">
          <view class="flex justify-right">
            {{ orderForm.IsConfirm ? '客户已确认' : '客户未确认' }}
          </view>
        </u-form-item>
        <u-form-item label="签收日期" prop="ConfirmDate">
          <u--input v-model="orderForm.ConfirmDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">完工记录</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="完工说明" prop="">
          <u--input v-model="orderForm.a" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="完工时间" prop="">
          <u--input v-model="orderForm.a" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">收入</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="合计" prop="a">
          <u--input v-model="orderForm.a" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">支出</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="合计" prop="a">
          <u--input v-model="orderForm.a" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">回访记录</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="100" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="是否回访" prop="IsVist">
          <view class="flex justify-right">
            {{ orderForm.IsVist ? '已回访' : '未回访' }}
          </view>
        </u-form-item>
        <u-form-item label="回访记录" prop="VistDescr">
          <u--input v-model="orderForm.VistDescr" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="回访人" prop="VistMan">
          <u--input v-model="orderForm.VistMan" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="回访日期" prop="VistDate">
          <u--input v-model="orderForm.VistDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title">评价</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="300" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="双方未评价" prop="Expense01">
        </u-form-item>
      </u--form>

      <u-button @click="goHistory" color="#F65D30" shape="circle" text="查看历史记录"></u-button>

    </view>
  </view>
</template>

<script src="./OrderView.js"></script>

<style lang="scss">
.create-order {
  .create-order-tabs {
    background-color: #fff;
  }

  .sub-title {
    color: $s-manager-color;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  ::v-deep .u-form-item__body__right__message {
    text-align: right;
  }

  .order-form-wrap {
    .order-form-single {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .order-form-title {
        color: #f43030;
        font-size: 30rpx;
        background-color: #fff7f5;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
      }

      ::v-deep .u-textarea {
        border-color: transparent !important;
        padding: 20rpx 30rpx;
        border-radius: 0;
      }

      ::v-deep .u-textarea--disabled {
        background-color: #fff;
      }

      ::v-deep .u-upload__wrap {
        padding: 30rpx;
        border-radius: 16rpx;

        .u-upload__button {
          background-color: #fff7f5;

          .u-icon__icon {
            color: $s-manager-color !important;
            font-size: 80rpx !important;
            line-height: 80rpx !important;
          }
        }
      }
    }

    .order-form-block {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .service-staff {
        width: 108px;
        height: 28px;
        border-radius: 14px;
      }

      .justify-right {
        justify-content: right;
        width: 100%;
      }

      ::v-deep .uni-input-wrapper {
        .uni-input-input {
          text-align: right;
        }

        .input-placeholder {
          text-align: right;
          color: #808080;
        }
      }

      ::v-deep .u-form-item__body__left__content__label {
        color: #222;
        font-size: 30rpx;
      }
    }
  }

  .order-popup {
    width: 600rpx;
    padding: 25rpx 30rpx;

    .popup-title {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    ::v-deep .uni-input-wrapper {
      .uni-input-input {
        text-align: left;
      }

      .input-placeholder {
        text-align: left;
        color: #808080;
      }
    }

    .popup-tip {
      margin-top: 20rpx;
      color: #555;
      font-size: 22rpx;
    }

    .btns {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20rpx 0;
      margin-top: 30rpx;
      background-color: #fff;

      ::v-deep .u-button {
        margin: 0;
      }
    }

    .order-radio {
      padding: 20rpx;
      margin-top: 30rpx;
      // ::v-deep .uicon-checkbox-mark{
      // 	color:#F65D30 !important;
      // }
    }
  }
}
</style>
